"use client";
import React, { useState } from 'react';
import { useRequest } from 'ahooks';
import axios from 'axios'

async function getSearchData(search?: string): Promise<string[]> {
  const res = await axios.get("/api/home", {
    params: {
      title: search
    }
  })
  return res.data
}

export default () => {
  const { data, loading, run } = useRequest(getSearchData, {
    debounceWait: 500,
    manual: true
  })

  return (
    <div>
      <input placeholder='搜索' onChange={(e) => run(e.target.value)}/>
      {loading ? (
        <p>loading</p>
      ) : (
        <ul style={{ marginTop: 8 }}>
          {data?.map((i) => (
            <li key={i}>{i}</li>
          ))}
        </ul>
      )}
    </div>
  );
};